---
title: 反饋
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

顯示進度或倒計時，從右到左移動。

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| 屬性        | 類型  | 描述                            | 預設值       |
| --------- | --- | ----------------------------- | --------- |
| 持續時間      | 數字  | 進度條動畫的總持續時間，以毫秒為單位            | 3         |
| 延遲        | 數字  | 開始進度條動畫的延遲時間，以毫秒為單位           | 0         |
| 緩動        | 字串  | 進度條動畫的緩動功能                    | easeInOut |
| barHeight | 數字  | 條的高度，以像素為單位                   | 24        |
| 條顏色       | 字串  | 條的顏色                          | gray80    |
| 自動開始      | 布爾值 | 如果設置為 `true`，則進度條動畫在組件加載時自動開始 | `真`       |

</Tab>
</Tabs>

## 圓形進度條

顯示任務的進度，通常用於加載畫面或需要向用戶傳達正在進行的流程的區域。

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| 屬性  | 類型 | 描述       | 預設值          |
| --- | -- | -------- | ------------ |
| 大小  | 數字 | 圓形進度條的大小 | 50           |
| 條寬度 | 數字 | 進度條的線寬   | 5            |
| 條顏色 | 字串 | 進度條的顏色   | currentColor |

</Tab>

</Tabs>
